const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { resolve } = require("path");

/**
 * tree shaking : 去除无用代码
 *  前提：1.必须使用es6模块化 2.开启production模式
 *  作用：减少代码体积
 * 
 * 在package.json 中配置 
 *  "sideEffects":false 所有代码都没有副作用 (都可以进行tree shaking)
 *   问题：可能会把css / @babel/polyfill(副作用)干掉
 * "sideEffects":["*.css"]
 */
 
 
 module.exports = {
     entry:'./src/js/index.js',
     output:{
         filename:'built.[hash:10].js',
         path:resolve(__dirname,'build'),
     },
     module:{
         /**
          * 正常来讲 一个文件只能被一个Loader处理；
          * 当一个文件要被多个Loader处理，那么一定要先指定loader的执行顺序
          */
        rules:[
            // {
            //     test:/\.js$/,
            //     exclude:/node_modules/,
            //     //表示优先执行
            //     enforce:'pre',
            //     loader:'eslint-loader',
            //     options:{
            //         fix:true
            //     }
            // },
            {
                //以下loader只会匹配一个文件
                //注意：不能有两个配置处理同一个类型的文件.如有将其中一个提取到外面
                oneOf:[
                    {
                        test:/\.css/,
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.js$/,
                        exclude:/node_modules/,
                        loader:'babel-loader',
                        options:{
                            presets:[[
                                '@babel/preset-env',
                                {
                                    //按需加载
                                    useBuiltIns:'usage',
                                    //指定core-js版本
                                    corejs:{
                                        version:3
                                    },
                                    //指定具体兼容性做到哪个版本浏览器
                                    targets:{
                                        chrome:'60',
                                        firefox:'60',
                                        ie:'9',
                                        safari:'10',
                                        edge:'17'
                                    }
                                }
                            ]],
                            //开启babel缓存
                            //第二次构建时，会去读之前的缓存
                            cacheDirectory:true
                        }
                    }
                ]
            }
        ]
     },
     plugins:[
         new HtmlWebpackPlugin({
             template:'./src/index.html',
             //压缩html代码
             minify:{
                 //移除空格
                 collapseWhitespace:true,
                 //移除注释
                 removeComments:true
             }
         })
     ],
     //生产环境会自动压缩js文件
     mode:'production',
    //  devtool:'source-map'
 }